<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
				</view>
				
			</view>
		</view>
		<view class="list-activity">
			<view   class="item" 
					v-for="(item, index) in goodsList" :key="index"
				    @click="navToDetailPage(item)">
				<image :src="item.image" class="left"></image>
				<view class="right">
					<view class="title"><label class="ing">报名中</label>{{item.title}}</view>
					<text class="subtitle">扣课2节 材料费{{item.sales}}元</text>
				</view>
			</view>			
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore	
		},
		data() {
			return {
				currentSwiper: 0,
				// 轮播图片
				swiperList: [
					{ id: 1, src: 'url1', img: '../../static/temp/banner1.jpg' },
					{ id: 2, src: 'url2', img: '../../static/temp/banner2.jpg' },
					{ id: 3, src: 'url3', img: '../../static/temp/banner3.jpg' },
					{ id: 4, src: 'url4', img: '../../static/temp/banner4.jpg' }
				],
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				goodsList: []
			};
		},
		
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.loadCateList(options.fid,options.sid);
			this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			// if(e.scrollTop>=0){
			// 	this.headerPosition = "fixed";
			// }else{
			// 	this.headerPosition = "absolute";
			// }
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: {
			//轮播图跳转
			toSwiper(e) {
				uni.showToast({ title: e.src, icon: 'none' });
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//加载分类
			async loadCateList(fid, sid){
				let list = await this.$api.json('cateList');
				let cateList = list.filter(item=>item.pid == fid);
				
				cateList.forEach(item=>{
					let tempList = list.filter(val=>val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				let goodsList = await this.$api.json('goodsList');
				if(type === 'refresh'){
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if(this.filterIndex === 1){
					goodsList.sort((a,b)=>b.sales - a.sales)
				}
				if(this.filterIndex === 2){
					goodsList.sort((a,b)=>{
						if(this.priceOrder == 1){
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}
				
				this.goodsList = this.goodsList.concat(goodsList);
				
				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//详情
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.content{
		padding-top: $page-row-spacing;
		/* #ifdef APP-PLUS*/
			padding-top: calc(var(--status-bar-height) + 36upx);
		/* #endif */
		/* #ifdef MP*/
			padding-top:0;
		/* #endif */
	}

	/* 顶部轮播图 */
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height: 30.4vw;	
			overflow: hidden;
			border-radius: 15upx;
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			margin: 0 $page-row-spacing;
			swiper {
				width: 100%;
				height: 30.5vw;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/4);
					}
				}
			}
		}
	}

	/*活动列表*/
	.list-activity{
		padding:$page-row-spacing;
		.item{
			padding: 14upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 200upx;
				height: 150upx;
				border-radius:12upx;
				 overflow: hidden;
			} 
			.right{
				margin-left: 20upx;
				flex: 1;
				.title{
					font-size: 28upx;
					color: $font-color-dark;
					height: 80upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					label{
						display: inline-block;
						font-size: 20upx;
						border-radius: 4upx;
						margin-right: 14upx;
						padding: 8upx 12upx;
						line-height:17upx;
						height: 30upx;
						&.ing{
							background: linear-gradient(to right, #42e55e , #36d248);
							color: #fff;
						}
						&.done{
							background: #e5e5e5;
							color: #989898;
						}
						&.full{
							background: linear-gradient(to right, #fb4d69 , #ff4455);
							color: #fff;
						}
						&.wait{
							background: linear-gradient(to right, #ff9e2c , #fe8700);
							color: #fff;
						}
					}
				}
				.subtitle{
					font-size: 22upx;
					color: #b3b3b3;
					margin-top:28upx;
					display: inline-block;
				}
				
			}
		}
		
	}
	

</style>
